<template>
    <!-- 添加 | 修改 | 查看弹窗 -->
    <el-dialog :title="`${drawerProps.title}`" v-model="drawerVisible" width="700px" append-to-body center destroy-on-close
        draggable :close-on-click-modal='false'>
        <el-form ref="ruleFormRef" :model="drawerProps.rowData" :rules="rules" label-width="auto"
            :disabled="drawerProps.title == '查看'">
            <el-form-item label="banner名称" prop="bannerName">
                <el-input v-model="drawerProps.rowData!.bannerName" placeholder="请输入banner名称" />
            </el-form-item>
            <el-form-item label="封面图" prop="coverPic">
                <ImageUpload v-model="drawerProps.rowData!.coverPic" :limit="1" :isShowTip="false" />
            </el-form-item>
            <el-form-item label="上传类型:" prop="contentType" style="margin-bottom: 0;">
                <el-select v-model="drawerProps.rowData.contentType" placeholder="上传类型" @change="drawerProps.rowData.content = ''" style="width: 100%">
                    <el-option label="图片" :value="0" />
                    <el-option label="链接" :value="1" />
                    <el-option label="视频" :value="2" />
                    <el-option label="富文本" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="内容:" prop="content" style="margin-top: 10px;">
                <ImageUpload v-if="drawerProps.rowData.contentType == 0" v-model="drawerProps.rowData!.content" :limit="1"
                    :isShowTip="false" />
                <el-input v-if="drawerProps.rowData.contentType == 1" v-model="drawerProps.rowData.content"
                    placeholder="请输入链接" />
                <FileUpload v-if="drawerProps.rowData.contentType == 2" v-model="drawerProps.rowData.content"
                    :fileType="['mp4']"></FileUpload>
                <editor v-model="drawerProps.rowData.content" :min-height="192"
                    v-if="drawerProps.rowData.contentType == 3" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确 定</el-button>
                <el-button @click="drawerVisible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template >
<script setup lang="ts" >
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
const proxy = getCurrentInstance()?.proxy;


//父组件传递参数类型
interface DiolgProps {
    title: string;
    isView: boolean;
    rowData: any;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
    [proName: string]: any
}
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const drawerVisible = ref(false);
const drawerProps = ref<DiolgProps>({
    isView: false,
    title: "",
    rowData: {},
});

// 接收父组件传过来的参数
const acceptParams = (params: DiolgProps) => {
    drawerProps.value = params;
    drawerVisible.value = true;
};

const handleSubmit = () => {
    ruleFormRef.value!.validate(async valid => {
        if (!valid) return;
        try {
            await drawerProps.value.api!(drawerProps.value.rowData);
            ElMessage.success({ message: `${drawerProps.value.title}成功！` });
            drawerProps.value.getTableList!();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

const rules = reactive({
    bannerName: [
        { required: true, message: '请输入banner名称', trigger: ['blur', 'change'] },
        { min: 1, max: 50, message: '名称长度在1-50个字符之间', trigger: ['blur', 'change'] }
    ],
    coverPic: [
        { required: true, message: '请上传封面图', trigger: 'change' }
    ],
    contentType: [
        { required: true, message: '请选择上传类型', trigger: 'change' }
    ],
    content: [
        {
            required: true,
            validator: (rule: any, value: any, callback: any) => {
                const level = drawerProps.value.rowData.contentType;
                if (!value) {
                    callback(new Error('请填写内容'));
                    return;
                }
                // 根据不同类型补充具体校验（示例）
                switch (level) {
                    case 0: // 图片
                        if (!value) callback(new Error('请上传图片内容'));
                        break;
                    case 1: // 链接
                        if (!/^https?:\/\/.+/i.test(value)) {
                            callback(new Error('请输入有效的http/https链接'));
                        }
                        break;
                    case 2: // 视频
                        if (!value) callback(new Error('请上传视频文件'));
                        break;
                    case 3: // 富文本
                        if (!value || value.trim().length === 0) {
                            callback(new Error('请输入富文本内容'));
                        }
                        break;
                }
                callback();
            },
            trigger: 'change'
        }
    ]
});
defineExpose({
    acceptParams
});
</script>
